<template>
    <van-sticky>
        <van-nav-bar title="我的收藏" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
        <!-- 加载列表 -->
        <van-list v-model:loading="loading" :finished="finished" :offset="10" :immediate-check="true"
            finished-text="没有更多了" @load="onLoad">
            <van-card v-for="item in productlist" :key="item.id" :thumb="item.collect.thumb_cdn">
                <template #title>
                    <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }"
                        style="font-size: 15px;">商品：{{ item.collect.name }}</router-link>
                </template>
                <template #price>
                    <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }"
                        style="font-size: 15px;">￥{{ item.collect.price }} /
                        {{ item.unitid == 1 ? "个" : item.unitid == 3 ? "张" : "台" }}</router-link>
                </template>
            </van-card>
        </van-list>
    </van-pull-refresh>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const productlist = ref([]);
const count = ref(0);
const business = proxy.$cookies.get('business').id;

const onRefresh = () => {
    finished.value = false;
    loading.value = true;

    setTimeout(onLoad, 1500);

}
const onClickLeft = () => {
    proxy.$router.back();
};

const onLoad = async () => {
    if (refreshing.value) {
        refreshing.value = false;
    }
    let data = {
        busid: business
    }

    let result = await proxy.$post({
        url: "/product/product/collect",
        params: data
    });

    if (result.code == 1) {
        productlist.value = result.data.list;
        count.value = result.data.count;

        finished.value = false;
        loading.value = false;

        if (productlist.value.length === count.value) {
            finished.value = true;

            return false;
        }
    } else {
        proxy.$showToast(result.msg);
    }
}
</script>